import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Row, Col, Button } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import SysUserList from './SysUserList';
import SysUserModal from './SysUserModal';
import UserRoleList from './UserRoleList';
import ResetPasswordModal from './ResetPasswordModal';

@connect(({ sysUser, userRole }) => ({
  sysUser,
  userRole,
}))
class SysUserRole extends PureComponent {

  handleOpenUserModal = data => {
    const { dispatch } = this.props;
    dispatch({ type: 'sysUser/openModal', payload: data || {} });
  };

  handleSubmitUserModal = values => {
    const { dispatch } = this.props;
    if (values.id) {
      dispatch({ type: 'sysUser/fetch' });
    } else {
      dispatch({ type: 'sysUser/reload' });
    }
  };

  handleViewUserRoles = record => {
    const { dispatch } = this.props;
    dispatch({ type: 'userRole/user', payload: record });
    dispatch({ type: 'userRole/fetch', payload: { userId: record.userId } });
    
  };

  handleSubmitRolesSelected = () => {
    const {
      dispatch,
      userRole: { user },
    } = this.props;
    dispatch({ type: 'userRole/fetch', payload: { indexId: user.userId } });
  };

  handleOpenResetPwModal = data => {
    const { dispatch } = this.props;
    dispatch({ type: 'sysUser/openResetPwModal', payload: data || {} });
  };

  render() {
    const {
      userRole: { user },
    } = this.props;
    const { username, realname } = user;
    return (
      <PageHeaderWrapper>
        <Row gutter={8}>
          <Col span={16}>
            <Card
              title="用户列表"
              extra={
                <Button type="primary" onClick={() => this.handleOpenUserModal()}>
                  新建
                </Button>
              }
            >
              <SysUserList
                onViewRoles={record => {
                  this.handleViewUserRoles(record);
                }}
                onEdit={record => this.handleOpenUserModal(record)}
                onResetPw={record => this.handleOpenResetPwModal(record)}
              />
              <SysUserModal onSubmit={this.handleSubmitUserModal} />
              <ResetPasswordModal />
            </Card>
          </Col>
          <Col span={8}>
            <Card
              title={`${username ? `${username}--${realname}  ` : ''} 角色列表`}
            >
              <UserRoleList />
            </Card>
          </Col>
        </Row>
      </PageHeaderWrapper>
    );
  }
}

export default SysUserRole;
